<template>
	<div class="header">
		<div class="daohang">
			<h3>结算中心</h3>
		</div>
		<Scroll class="wrapper"> 
			<div class="fatDiv">
				<div class="settlementAddress">
					<h3 class="name">李四</h3>
					<h3 class="phone">15027895632</h3>
					<br />
					<span class="ModifyAddess">
						<h3>修改地址</h3>
					</span>
					<p class="address">河南省新乡市辉县百泉镇B座102室</p>
					<h3 class="emil">邮编:453000</h3>
					
				</div>
				<div class="maney">
					<h3>本单请支付</h3>
					<h3 class="money">¥392.12</h3>
				</div>
				<div class="payway">
					<span class="thirdparty">使用第三方支付平台:</span>
					<span class="Paytreasure">
						<img src="../../../static/F-img/支付宝.png"/>
						<h3>支付宝支付</h3>
						
					</span>
					<span class="Microletter">
						<img src="../../../static/F-img/微信.png"/>
						<h3>微信支付</h3>
					</span>
					<span class="Packup">
						<h3>收起</h3>
					</span>
					
				</div>
				<span class="confirmpay">
					<h3 @click="$router.push({path:'/HomePage'})">确认支付</h3>
				</span>
			</div>
		</Scroll>
	</div>
</template>

<script>
	import Scroll from '../../../base/Scroll'
	export default{
		name:"settlement",
		data(){
			return{
				
			}
		},
		components:{
	  		Scroll
	  }
	}
</script>

<style scoped="scoped">
	.header{
		background-color: #efefef;
	}
	.wrapper{
		overflow: hidden;
		height: 90vh;	
	}
	.daohang{
		width: 100vw;
		height: 10vh;
		background-color: #d72532;
		text-align: center;
		border-bottom: 1px solid #cccccc;
	}
	.daohang h3{
		display: inline-block;
		color: white;
		font-size: 1.8rem;
		font-weight: 100;
		line-height: 10vh;
	}
	.settlementAddress{
		width: 100%;
		background-color: white;
		/*padding-top: 1.5rem;
		padding-left: 1.5rem;*/
		padding-bottom: 1.5rem;
	}
	h3,p{
		display: inline-block;
		color: #808080;
	}
	.name{
		font-size: 1.5rem;
		font-weight: 300;
		margin-top-top: 1.5rem;
		margin-left: 1rem;
		margin-bottom: 0.5rem;
		/*padding-bottom: 1.5rem;*/
	}
	.phone{
		font-size: 1.3rem;
		font-weight: 300;
		margin-top: 1rem;
		margin-left: 1rem;
	}
	.address,.emil{
		font-size: 1.3rem;
		font-weight: 300;
		margin-top-top: 1.5rem;
		margin-left: 1rem;
	}
	.ModifyAddess{
		width: 12.5%;
		height: 3.3rem;
		display: inline-block;
		border: 1px solid #efefef;
		border-radius: 50%;
		float: right;
		margin-right: 2rem;
		margin-top: -5%;
	}
	.ModifyAddess h3{
		font-size: 1.3rem;
		font-weight: 300;
		line-height: 1.3rem;
		margin-top: 0.3rem;
		margin-left: 0.2rem;
		text-align: center;
		color: #808080;
	}
	.maney{
		width: 100%;
		background-color: white;
		margin-top: 1rem;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}
	.maney h3{
		padding: 1rem;
		font-size: 1.4rem;
		font-weight: 400;
		
	}
	.money{
		float: right;
		color: red;
	}

	.payway{
		background-color: white;
		margin-top: 1rem;
	}
	.thirdparty{
		padding: 1rem;
		display: block;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		font-size: 1.3rem;
		color: #808080;
	}
	.Paytreasure{
		display: block;
		padding: 1rem;
		border-bottom: 0.1rem solid #cccccc;	
		background: url(../../../static/F-img/选中.png)no-repeat;
		background-size: 4.5%;
		background-position: 95% 50%;
	}
	.Paytreasure img{
		width: 6%;
		vertical-align: middle;
	}
	.Paytreasure h3{
		font-size: 1.2rem;
		font-weight: 400;
		vertical-align: middle;
		margin-left: 0.3rem;
		
	}
	.Microletter{
		display: block;
		padding: 1rem;
		border-bottom: 0.1rem solid #cccccc;
		background: url(../../../static/F-img/未选中.png)no-repeat;
		background-size: 4.5%;
		background-position: 95% 50%;
	}
	.Microletter img{
		width: 6%;
		vertical-align: middle;
		
	}
	.Microletter h3{
		font-size: 1.2rem;
		font-weight: 400;
		vertical-align: middle;
		margin-left: 0.3rem;
	}
	.Packup{
		width: 100%;
		height: 10%;
		text-align: center;
		display: inline-block;
		background: url(../../../static/F-img/收起箭头.png)no-repeat;
		background-size: 4%;
		background-position: 60% 50%;
	}
	.Packup h3{
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;  
		font-size: 1.3rem;   
		font-weight: 400;    
		color: #4d4d4d;     
		                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                	}
	.confirmpay{
			width: 100%;
			display: inline-block;
			text-align: center;
			margin-top: 10%;
	}
	.confirmpay h3{
		padding: 0.3rem 7rem;
		background-color: #e53e42;
		border-radius: 20rem;
		color: white;
		font-size: 1.3rem;  
		font-weight: 400; 

	}
</style>